<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px" @click="addRow">新增分类</el-button>
        <!-- 分类管理 -->
        <el-table ref="tableRef"  :data="tableData"  style="margin-bottom: 20px" row-key="id" border default-expand-all>
            <el-table-column prop="name" label="分类名称" sortable />
            <el-table-column label="分类级别">
                <template #default="{ row }">
                    <span v-if="row.pid == 0">一级分类</span>
                    <span v-else>二级分类</span>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="分类编号" />
            <el-table-column label="分类图片">
                <template #default="{ row }">
                    <el-image v-if="row.picture != ''" :src="row.picture" fit="contain"
                        style="display: flex; align-items: center; height: 60px" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template #default="{ row }">
                    <el-button type="warning" @click="editRow(row)">编辑</el-button>
                    <el-button type="danger" @click="delRow(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'

const tableData= ref([])
const dataInit = [{
            "id": 1,
            "name": "潮流女装",
            "picture": "",
            "pid": 0
        },
        {
            "id": 2,
            "name": "羽绒服",
            "picture": "http://127.0.0.1:8360/static/image/category/clothes/jackets.png",
            "pid": 1
        },
        {
            "id": 3,
            "name": "毛呢大衣",
            "picture": "http://127.0.0.1:8360/static/image/category/clothes/overcoat.jpg",
            "pid": 1
        },
        {
            "id": 4,
            "name": "连衣裙",
            "picture": "http://127.0.0.1:8360/static/image/category/clothes/dress.png",
            "pid": 1
        },
        {
            "id": 5,
            "name": "食品",
            "picture": "",
            "pid": 0
        },
        {
            "id": 6,
            "name": "休闲零食",
            "picture": "http://127.0.0.1:8360/static/image/category/foods/biscuit.jpg",
            "pid": 5
        },
        {
            "id": 7,
            "name": "生鲜果蔬",
            "picture": "http://127.0.0.1:8360/static/image/category/foods/tomato.jpg",
            "pid": 5
        },
        {
            "id": 8,
            "name": "饮料汽水",
            "picture": "http://127.0.0.1:8360/static/image/category/foods/drinks.jpg",
            "pid": 5
        },
        {
            "id": 9,
            "name": "四季茗茶",
            "picture": "http://127.0.0.1:8360/static/image/category/foods/tea.jpg",
            "pid": 5
        },
        {
            "id": 10,
            "name": "粮油调味",
            "picture": "http://127.0.0.1:8360/static/image/category/foods/oil.jpg",
            "pid": 5
        },
        {
            "id": 11,
            "name": "珠宝配饰",
            "picture": "",
            "pid": 0
        },
        {
            "id": 12,
            "name": "时尚饰品",
            "picture": "http://127.0.0.1:8360/static/image/category/jewelry/ornaments.jpg",
            "pid": 11
        },
        {
            "id": 13,
            "name": "品质手表",
            "picture": "http://127.0.0.1:8360/static/image/category/jewelry/watch.jpg",
            "pid": 11
        },
        {
            "id": 14,
            "name": "DIY饰品",
            "picture": "http://127.0.0.1:8360/static/image/category/jewelry/diy.jpg",
            "pid": 11
        },
        {
            "id": 15,
            "name": "日用百货",
            "picture": "",
            "pid": 0
        },
        {
            "id": 16,
            "name": "居家日用",
            "picture": "http://127.0.0.1:8360/static/image/category/store/towel.png",
            "pid": 15
        },
        {
            "id": 17,
            "name": "个人清洁",
            "picture": "http://127.0.0.1:8360/static/image/category/store/paper.png",
            "pid": 15
        },
        {
            "id": 18,
            "name": "盆碗碟筷",
            "picture": "http://127.0.0.1:8360/static/image/category/store/bowl.png",
            "pid": 15
        },
        {
            "id": 19,
            "name": "茶杯茶具",
            "picture": "http://127.0.0.1:8360/static/image/category/store/cup.png",
            "pid": 15
        },
        {
            "id": 20,
            "name": "收纳整理",
            "picture": "http://127.0.0.1:8360/static/image/category/store/box.png",
            "pid": 15
        },
        {
            "id": 21,
            "name": "手机数码",
            "picture": "",
            "pid": 0
        },
        {
            "id": 22,
            "name": "手机",
            "picture": "http://127.0.0.1:8360/static/image/category/phone/phone.png",
            "pid": 21
        },
        {
            "id": 23,
            "name": "笔记本",
            "picture": "http://127.0.0.1:8360/static/image/category/phone/computer.png",
            "pid": 21
        },
        {
            "id": 24,
            "name": "数码配件",
            "picture": "http://127.0.0.1:8360/static/image/category/phone/headset.png",
            "pid": 21
        },
        {
            "id": 25,
            "name": "平板",
            "picture": "http://127.0.0.1:8360/static/image/category/phone/flat.png",
            "pid": 21
        },
        {
            "id": 26,
            "name": "相机",
            "picture": "http://127.0.0.1:8360/static/image/category/phone/camera.png",
            "pid": 21
        },
        {
            "id": 27,
            "name": "户外运动",
            "picture": "",
            "pid": 0
        },
        {
            "id": 28,
            "name": "运动鞋",
            "picture": "http://127.0.0.1:8360/static/image/category/motion/shoes.jpg",
            "pid": 27
        },
        {
            "id": 29,
            "name": "球类运动",
            "picture": "http://127.0.0.1:8360/static/image/category/motion/ball.png",
            "pid": 27
        },
        {
            "id": 30,
            "name": "垂钓用品",
            "picture": "http://127.0.0.1:8360/static/image/category/motion/fishingrod.png",
            "pid": 27
        },
        {
            "id": 31,
            "name": "运动服",
            "picture": "http://127.0.0.1:8360/static/image/category/motion/clothes.png",
            "pid": 27
        },
        {
            "id": 32,
            "name": "骑行装备",
            "picture": "http://127.0.0.1:8360/static/image/category/motion/bicycle.png",
            "pid": 27
        },
        {
            "id": 33,
            "name": "电动车",
            "picture": "http://127.0.0.1:8360/static/image/category/motion/vehicle.png",
            "pid": 27
        }]

onMounted(()=>{
    tableData.value = converToTree(dataInit)
})

//将数据转成树形结构
const converToTree=data=>{
    const treeData = []
    const map={}
    for(const item of data){
        //
        map[item.id] = {...item , children:[]};
        
    }
    for(const item of data){
        const node = map[item.id];
        if(item.pid === 0){
            treeData.push(node)
        }else{
            const parent = map[item.pid]
            parent.children.push(node)
        }
    }
    
    return treeData
}

//添加
const addRow=()=>{

}
</script>